<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="isEdit ? '修改部门' : '新增部门'"
    width="800px"
    :visible.sync="visible"
  >
    <el-form :model="form" ref="form" :rules="rules" label-width="100px">
      <el-form-item label="上级部门">
        <dept-select
          :disabled="parentSelect"
          ref="deptSelect"
          class="w393-mr20 fl w440"
          :selectValue="form.parentId"
          v-model="form.parentId"
          @select="handleDeptSelect"
        />
        <el-checkbox v-model="parentSelect" @change="checkChange">顶级菜单</el-checkbox>
      </el-form-item>
      <el-form-item label="部门编码" v-show="isEdit">
        <el-input
          :readOnly="true"
          class="short-input"
          type="text"
          allowClear
          autocomplete="false"
          placeholder="请输入部门编码"
          v-model="form.deptId"
        />
      </el-form-item>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item class="mb0" label="部门名称" prop="deptName">
            <el-input
              :readOnly="isEdit"
              type="text"
              autocomplete="false"
              placeholder="请输入部门名称"
              v-model="form.deptName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="mb0" label="部门负责人" prop="positionId">
            <el-select clearable v-model="form.positionId" placeholder="请选择岗位后再选择">
              <el-option
                v-for="(item,index) in chargeData"
                :key="index"
                :value="item.positionId"
                :label="item.positionName"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider />
      <div class="mb10">部门岗位设置</div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          class="mb10"
          v-for="(item,index) in positionData"
          :key="index"
          :label="item.positionId"
        >{{ item.positionName }}</el-checkbox>
      </el-checkbox-group>
      <!-- <el-form-item label="允许删除">
        <el-radio-group name="allowDelete" v-model="form.flag">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>-->
    </el-form>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button @click="handleOk" type="primary">{{ isEdit ? '修改' : '新增' }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { insertDept, updateDept } from '@/api/department'
import { getPosition } from '@/api/position'
import { openNotification } from '@/utils/util'
import DeptSelect from '@/components/DeptSelect'
import pick from 'lodash.pick'

export default {
  components: {
    DeptSelect
  },
  data() {
    return {
      parentSelect: true,
      visible: false,
      isEdit: false,
      form: {
        parentId: null,
        deptId: null,
        positionId: null,
        deptName: null
      },
      checkList: [],
      chargeData: [],
      positionData: [],
      rules: {
        deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
        // deptOrder: [{ type: 'number', message: '排序值需输入数字' }],
        positionId: [{ required: true, message: '请选择部门负责人', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    getPosition().then(res => {
      this.positionData = res.data
    })
  },
  watch: {
    checkList(n, o) {
      if (n !== o) {
        this.chargeData = []
        // 已选择部门负责人的情况下，在部门岗位中又去掉该项，则清空部门负责人
        const clearS = n.some(v => v === this.form.positionId)
        if (!clearS) {
          this.$set(this.form, 'positionId', null)
        }
        n.map(v => {
          this.positionData.map(j => {
            if (j.positionId === v) {
              this.chargeData.push(j)
            }
          })
        })
      }
    }
  },
  methods: {
    checkChange(e) {
      if (e) {
        this.reset()
      } else {
        this.parentSelect = false
      }
    },
    reset() {
      this.$nextTick(() => {
        this.parentSelect = true
        this.form.parentId = null
        this.$refs.deptSelect.reset()
      })
    },
    edit(bool, record) {
      /**
       * treeObj 的 parentId 为空时
       * 未选择树的节点，则新增和编辑都为顶级菜单，可取消，选择下拉树的任何节点
       */
      console.log('record', record, bool)
      this.checkList = []
      this.isEdit = bool
      this.form = Object.assign({}, record)
      this.visible = true
      // 开始选择部门，后面取消掉选择的情况
      if (!record.parentId) {
        this.reset()
      } else {
        this.parentSelect = false
      }
      if (!bool) {
        // 新增
        this.checkList = []
      } else {
        record.sysDeptPositionList.map(v => {
          this.checkList.push(v.positionId)
          this.chargeData.push(v)
          if (v.chargePost === 1) {
            this.$set(this.form, 'positionId', v.positionId)
          }
        })
      }
    },
    async handleOk(e) {
      e.stopPropagation()
      console.log('checkList', this.form, this.checkList)
      this.$refs.form.validate(async valid => {
        if (valid) {
          let mes = '',
            res = ''
          this.form.sysDeptPositionList = []
          this.checkList.map(v => {
            this.form.sysDeptPositionList.push({
              positionId: v
            })
          })
          // this.$set(this.form, 'sysDeptPositionList', this.checkList)

          console.log('form', this.form)

          if (this.isEdit) {
            mes = '修改操作成功'
            this.form.sysDeptPositionList.map(v => {
              v.deptId = this.form.deptId
            })
            res = await updateDept(this.form)
            console.log('update res', res)
          } else {
            mes = '新增操作成功'
            res = await insertDept(this.form)
          }
          console.log('res', res)

          if (res.state === '000000') {
            openNotification('success', mes)
            this.visible = false
            this.$emit('refresh')
          }
        }
      })
    },
    handleDeptSelect(value) {
      console.log('value', value)

      this.$set(this.form, 'parentId', value.key)
    }
  }
}
</script>

<style scoped>
.w440 {
  width: 440px !important;
}
</style>
